// 页面出初始化函数
$(function(){
	// 页面更新加载
	getData();
	testName();
	testType();
	testTeacher()
})
// 数据渲染函数
function getData(){
	$.ajax({
		url:"http://localhost:3000/list",
		type:"get",
		success:function(data){
			// console.log(data)
			var result={data:data};
			// template（挂载的模板id,数据（这个数据外层是对象，内层是数组，使用该方法会自动剥离一层））
			var html=template("tmplt",result);
			$("#tbody").html(html)
		}
	})
};
// 判断是否格式正确，只有全部为true才能执行提交
var isName=false;
var isType=false;
var isTeacher=false;

// 检查名字格式
function testName(){
	$("input:first").focus(function(){
		$(this).css({"border-color":" rgb(102,175,233)","box-shadow": "0 0 3px rgb(102,175,233)"})
		
	}).blur(function(){
		// console.log($(this).val())
		var Name=$(this).val();
		// 正则，正则验证用户输入的数据是否合法
		var re = new RegExp("^[\u4e00-\u9fa5]{2,4}$");
		if (re.test(Name)||Name=="") {
			// 合法
			$("h1:first").css("opacity","0")
			$(this).css({"border-color":" rgb(204,204,204)","box-shadow": "0 0 3px rgb(204,204,204)"})
			isName=true
		} else {
			// 不合法 ,将后面的h1标签显示
			$("h1:first").css("opacity","1")
			$(this).css({"border-color":" red","box-shadow": "0 0 4px red"})
			isName=false

		}
	})
}
// 方向检查
function testType(){
	$("input:eq(1)").focus(function(){
		$(this).css({"border-color":" rgb(102,175,233)","box-shadow": "0 0 3px rgb(102,175,233)"})
		
	}).blur(function(){
		// console.log($(this).val())
		var Type=$(this).val();
		if (Type=="前端"||Type=="java"||Type=="大数据"||Type=="") {
			// 合法
			$("h1:eq(1)").css("opacity","0")
			$(this).css({"border-color":" rgb(204,204,204)","box-shadow": "0 0 3px rgb(204,204,204)"})
			isType=true
		} else {
			// 不合法 ,将后面的h1标签显示
			$("h1:eq(1)").css("opacity","1")
			$(this).css({"border-color":" red","box-shadow": "0 0 4px red"})
			isType=false
		}
	});
}
// 检查老师姓名格式
function testTeacher(){
	$("input:eq(2)").focus(function(){
		$(this).css({"border-color":" rgb(102,175,233)","box-shadow": "0 0 3px rgb(102,175,233)"})
		
	}).blur(function(){
		var Teacher=$(this).val();
		// 长度为3-6
		var re = new RegExp("^[A-Za-z]{3,6}$");
		if (re.test(Teacher)||Teacher=="") {
			$("h1:eq(2)").css("opacity","0")
			$(this).css({"border-color":" rgb(204,204,204)","box-shadow": "0 0 3px rgb(204,204,204)"})
			isTeacher=true
		} else {
			$("h1:eq(2)").css("opacity","1")
			$(this).css({"border-color":" red","box-shadow": "0 0 4px red"})
			isTeacher=false
		}
	});
}
// 添加数据函数
function pushData(inputName,inputType,inputTeacher){
	$.ajax({
		url:"http://localhost:3000/list",
		type:"post",
		// 将数据更新传入
		data:{
			name:inputName,
			type:inputType,
			teacher:inputTeacher
		},
		success:function(){
			getData()
		}
		})
};
// 页面加载完成时候页面显示的元素可以用on，也可以用click，但是页面加载完成之后后期再追加的元素只能用on
// $(".btn-success").click(function(){
// 	var inputName=$(".input_style input")[0].value;
// 	var inputType=$(".input_style input")[1].value;
// 	var inputTeacher=$(".input_style input")[2].value;
// 	pushData(inputName,inputType,inputTeacher);
// 	// console.log(inputName,inputType,inputTeacher)
// })

// 点击添加按钮
$(".btn-success").on("click",function(){
	var inputName=$(".input_style input")[0].value;
	var inputType=$(".input_style input")[1].value;
	var inputTeacher=$(".input_style input")[2].value;
	if(isName&&isType&&isTeacher){
		pushData(inputName,inputType,inputTeacher);
		$(".input_style input")[0].value="";
		$(".input_style input")[1].value="";
		$(".input_style input")[2].value="";
		isName=false;
		isType=false;
		isTeacher=false;
	}
	else{
		confirm("请输入正确信息再提交");
		return false
	}
});
// 删除函数实现
function deleteData(id,callback){
	$.ajax({
		url:"http://localhost:3000/list/"+id,
		type:"delete",
		success:function(){
			callback&&callback()
		}
		})
};
// on方法可以接受三个参数：事件名、触发选择器、事件函数
// 只能用on，我们创建的delete是动态生成的，click()方法针对未创建的元素不起作用
// 点击删除按钮
$("#tbody").on("click",".delete",function(){
	// console.log($(this))
	// $(this)是当前点击的对象
	// var id=$(this).parent().parent().children().first().text()
	var id=$(this).parent().parent().children("td:first").text();
	console.log(id)
	var flag=confirm("是否确认删除？");
	if(flag){
		// 在回调函数中执行数据的更新，因为ajax是异步请求，确保是删除后才更新
		deleteData(id, function(){ getData() }) }
});